import React from "react";
import {CustomButton} from "./custombutton";

export const CustomToolbar = () => (
    <div id="toolbar" className='toolbar_js'>

        {/*<select className="ql-header" defaultValue={"1"} onChange={e => e.persist()}>*/}
        {/*<option value="1" />*/}
        {/*<option value="2" />*/}
        {/*<option value="3" />*/}
        {/*<option value="4" />*/}
        {/*<option value="5" />*/}
        {/*<option value="6" />*/}
        {/*</select>*/}

        {/*<select className="ql-color" defaultValue={'0'}>*/}
        {/*<option value="red" />*/}
        {/*<option value="green" />*/}
        {/*<option value="blue" />*/}
        {/*<option value="orange" />*/}
        {/*<option value="violet" />*/}
        {/*<option value="#d0d1d2" />*/}
        {/*<option />*/}
        {/*</select>*/}

        {/*<select className="ql-background" defaultValue="1">*/}
        {/*<option value="#f5222d" />*/}
        {/*<option value="#fa541c" />*/}
        {/*<option value="#fa8c16" />*/}
        {/*<option value="#faad14" />*/}
        {/*<option />*/}
        {/*</select>*/}


        {/*<button className="ql-italic" />*/}
        {/*<button className="ql-strike" />*/}
        {/*<button className='ql-blockquote'/>*/}
        {/*<button className='ql-code-block'/>*/}

        {/*<button className='ql-list' value='ordered'/>*/}
        {/*<button className='ql-list' value='bullet'/>*/}

        {/*<button className='ql-indent' value='-1'/>*/}
        {/*<button className='ql-indent' value='+1'/>*/}

        {/*<button className='ql-direction' value="rtl"/>*/}
        <div className='toolbar_top'>
            <button className='ql-link'/>
            <button className='ql-image'/>
        </div>

        <div className='toolbar_down'>
            <button className="ql-bold"/>
            <button className="ql-underline"/>
            <button className="ql-size" value="small">小</button>
            <button className="ql-size" value="large">中</button>
            <button className="ql-size" value="huge">大</button>
            <button className="ql-size">默认</button>
        </div>


        {/*<select className="ql-size" defaultValue="small">*/}
        {/*<option value="small">小</option>*/}
        {/*<option value="large">中</option>*/}
        {/*<option value="huge">大</option>*/}
        {/*</select>*/}
        {/*<button className='ql-formula'/>*/}
        {/*<button className='ql-clean'/>*/}
        {/*<button className="ql-insertStar">*/}
        {/*<CustomButton />*/}
        {/*</button>*/}

        {/*<button className="ql-script" value='sub'/>*/}
        {/*<button className="ql-script"  value='super'/>*/}
    </div>
);